<template>
    <div class="process1">
        <processwawrd v-if="reward == 1" @click="rightreward"></processwawrd>
        <processerror v-else-if="reward == 2" @click="rightreward"></processerror>
        <div class="tip" v-else-if="tip == 1">
            <div class="main">游戏说明
                该关卡游戏为“现实情境模拟”，需要家长配合操作。接下来屏幕中会出现情景设置的句子，家长需要根据情境设置表演出该情景，然后问孩子你刚刚表现出的情绪，最后在屏幕中输入孩子回答的答案并点击屏幕中按钮判断孩子回答的正误情况
            </div>
            <button @click="tip = 0">确认</button>
        </div>
        <div class="body" v-else-if="topic.scene != ''">

            <div class="main">
                <p>1、请家长现场演绎以下场景中的事件和情绪：</p>
                <p>{{ topic.scene }}</p>
                <p>（{{ topic.performance }}）</p>
                <p>2、然后让孩子判断你的情绪是怎么样的（{{ topic.ques }}）</p>
                <p>3、在下方输入宝贝的答案，并判断正误，正确点“√”，错误点“X”</p>
            </div>
            <a-input type="textarea" class="input" v-model:value="value" placeholder="输入宝贝的答案" />
            <div class="btns">
                <img src="@/static/right.png" @click="choose(1)" alt="">
                <img src="@/static/cha.png" @click="choose(0)" alt="">
            </div>
        </div>
        <div class="body" v-else>
            <div class="endmain">
                <img src="@/static/cup.png" alt="">
                <div class="end"> 恭喜你，闯关成功</div>

            </div>
            <router-link to="/start"><a-button> 返回首页</a-button></router-link>
        </div>
    </div>
</template>
<script setup>

import { onMounted, ref } from 'vue';
import api from '../../api/user';
import processwawrd from '@/components/processaward.vue'
import processerror from '@/components/processerror.vue'
import { message } from 'ant-design-vue';
const tip = ref(1);
const topic = ref({
    scene: "",
    ques: null,
});
const value = ref();
onMounted(() => {
    getfiveques();
})
const reward = ref(0);
const rightreward = () => {
    reward.value = 0;
    getfiveques();
}
const choose = (x) => {
    if (value.value != null) {
        if (x == 1) {
            reward.value = 1;
        } else {
            reward.value = 2;
        }
        api.addfiveques({
            "answer": value.value,
            "correct": x,
            "part5Id": topic.value.id
        }).then((res) => {
            console.log(res);
            getfiveques();
        })

    } else {
        message.info("请先输入答案")
    }


}
const getfiveques = () => {
    api.getfiveques()
        .then((res) => {
            console.log(res);
            if (res.data != null){
                topic.value = res.data
            }else{
                topic.value.scene=''
            }
          
        })
}
</script>
<style lang="scss" scoped>
.process1 {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url('@/static/processback.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    .tip {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 3rem;
        flex-direction: column;

        .main {
            padding: 1rem;
            background-color: #f5edcd;
            height: 30rem;
            width: 70%;
            font-size: 2rem;
            overflow-y: auto;
            gap: 2rem;

            p {
                margin: 0px;
            }
        }

        button {
            width: 12rem;
            height: 6rem;
            font-size: 2rem;
        }
    }

    .body {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 3rem;
        flex-direction: column;

        button {
            width: 12rem;
            height: 6rem;
            font-size: 2rem;
        }

        .endmain {
            padding: 1rem;
            // height: 40rem;
            width: 70%;
            font-size: 2rem;
            overflow-y: auto;
            gap: 2rem;
            border-radius: 0.5rem;

            img {
                width: 50%;
            }


            .end {
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 4rem;
            }

            p {

                margin: 0px;
            }
        }

        .main {
            padding: 1rem;
            background-color: #f5edcd;
            height: 30rem;
            width: 70%;
            font-size: 2rem;
            overflow-y: auto;
            gap: 2rem;
            border-radius: 0.5rem;

            img {
                height: 80%;
            }


            .end {
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 2rem;
            }

            p {

                margin: 0px;
            }
        }

        .input {
            width: 50%;
            height: 4rem;
            font-size: 3rem;
        }
    }



}
</style>